<template>
    <div class="user">
      <div id="user"></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import {inject, onMounted} from 'vue'
          
          let echarts = inject("$ec") as any
          let erd = inject("$erd") as any
          onMounted(() => {
              let chartOptions = {
  title: {
    text: 'Proportion of Browsers',
    subtext: 'Fake Data',
    top: 10,
    left: 10
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true
  },
  radar: {
    indicator: [
      { text: 'IE8-', max: 400 },
      { text: 'IE9+', max: 400 },
      { text: 'Safari', max: 400 },
      { text: 'Firefox', max: 400 },
      { text: 'Chrome', max: 400 }
    ]
  },
  series: (function () {
    var series:any = [];
    for (var i = 1; i <= 28; i++) {
      series.push({
        type: 'radar',
        symbol: 'none',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              (40 - i) * 10,
              (38 - i) * 4 + 60,
              i * 5 + 10,
              i * 9,
              (i * i) / 2
            ],
            name: i + 2000 + ''
          }
        ]
      });
    }
    return series as echarts.RadarSeriesOption;
  })()
};
              // 这句话很重要，在开发环境下没有问题，如果缺少这行代码，在发布环境中echarts只能渲染一次
              let chartDom = document.querySelector("#user") as any;
              chartDom.removeAttribute("_echarts_instance_")
              let myChart = echarts.init(chartDom);
              // 绘制图表
              myChart.setOption(chartOptions, true)
              erd.listenTo(chartDom, function(element:object) {
                  myChart.resize();
              });
          
          })
  </script>
  
  <style lang="less" scoped>
  #user{
      width: 100%;
      height: 388px;
  }
  </style>
  